@import '../variables/default.scss';
@import '../mixins/index.scss';

.at-calendar {
  overflow: hidden;

  /* elements */
  &__header {
    &__flex {
      @include display-flex;
      flex-direction: row;
      @include align-items(center);

      height: 72px;
      color: $at-calendar-header-color;
      text-align: center;

      &-item {
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: 14.2%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        &__text {
          font-size: 30px;
        }
      }
    }
  }

  &__list {
    @include display-flex;
    flex-direction: row;
    @include align-items();
    @include flex-wrap(wrap);

    color: $at-calendar-day-color;

    &__item {
      flex-shrink: 0;
      flex-grow: 0;
      flex-basis: 14.2%;

      font-size: 30px;
      text-align: center;
      position: relative;
      margin: 5px 0;

      &-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        width: $at-calendar-day-size;
        height: $at-calendar-day-size;
        margin-left: auto;
        margin-right: auto;
        border-radius: $at-calendar-day-size / 2;

        &__text {
          display: flex;
          flex-direction: row;
          color: $at-calendar-day-color;

          &--today {
            color: $at-calendar-main-color;
            //font-weight: bolder;
          }

          &--blur {
            color: #e1e4e7;
          }

          &--selected {
            color: white;
            //background-color: rgba($color: $at-calendar-main-color, $alpha: 0.7);
          }
        }
      }

      &-extra {
        .extra-marks {
          position: absolute;
          bottom: 5px;
          line-height: 0;
          left: 50%;
          //transform: translateX(-50%);

          .mark {
            width: $at-calendar-mark-size;
            height: $at-calendar-mark-size;
            margin-right: 4px;
            //display: inline-block;
            background-color: $at-calendar-main-color;
            border-radius: $at-calendar-mark-size / 2;
            overflow: hidden;

            &:last-child {
              margin-right: 0;
            }
          }
        }
      }

      &--today {
        color: $at-calendar-main-color;
        font-weight: bolder;
      }

      &--blur {
        color: #e1e4e7;
      }

      &--selected {
        color: white;
        background-color: rgba($color: $at-calendar-main-color, $alpha: 0.7);

        &-head {
          border-top-left-radius: 40px;
          border-bottom-left-radius: 40px;
        }

        &-tail {
          border-top-right-radius: 40px;
          border-bottom-right-radius: 40px;
        }

        /* stylelint-disable-next-line */
        .extra-marks .mark {
          background-color: white;
        }

        &-head.flex__item--selected-tail {
          background-color: transparent;

          .flex__item-container {
            background-color: rgba(
              $color: $at-calendar-main-color,
              $alpha: 0.7
            );
          }
        }
      }
    }
  }

  &__controller {
    display: flex;
    flex-direction: row;
    @include align-items(center);
    @include justify-content(center);

    margin-bottom: 20px;

    &__arrow {
      height: 40px;
      width: 40px;
      border-radius: 12px;
      background-color: #f7f8fc;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

      &--right {
        //transform: rotate(180deg);
      }

      &--disabled {
        opacity: 0.5;
      }
    }

    &__info {
      //@include flex(0 0 auto);

      font-size: 30px;
      margin-left: 40px;
      margin-right: 40px;
    }
  }
}

.at-calendar-slider__main {
  &__body {
    @include display-flex;
    flex-direction: row;
    height: 480px;
    width: 100%;

    &--animate {
      transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
    }

    .body__slider {
      @include flex(0 0 100%);
    }
  }

  &--WEAPP,
  &--SWAN {
    .main__body {
      height: 480px;
    }
  }
}
